import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# 2. 安装这个插件并运行

## 安装插件

在项目目录下，执行:


<Tabs>
  <TabItem label="npm" value="npm">
  

```bash
npm i -D weapp-tailwindcss @weapp-tailwindcss/cli
```


  </TabItem>
  <TabItem label="yarn" value="yarn">
  

```bash
yarn add -D weapp-tailwindcss @weapp-tailwindcss/cli
```


  </TabItem>
  <TabItem label="pnpm" value="pnpm">
  

```bash
pnpm i -D weapp-tailwindcss @weapp-tailwindcss/cli
```


  </TabItem>
</Tabs>

这样 `weapp-tailwindcss` 和 `cli` 工具就被安装在你的本地了

## 执行初始化命令

在命令行中运行

```sh
npx weapp-tw init
```

对现有的原生小程序项目，进行 `weapp-tailwindcss` 的初始化

执行后，会发现主要有三个文件改动，`CLI` 主要做了 `3` 件事情:

- 创建 `weapp-tw.config.js` 文件，这个是 `@weapp-tailwindcss/cli` 的配置文件
- 修改 `package.json`, 添加 `dev` 和 `build` 开发和构建脚本, 和 `postinstall`
- 修改 `project.config.json` 内容，来适配构建产物

## 开始运行

使用 `npm run dev` 进入开发模式, 此模式带有热更新的，主要用于开发

使用 `npm run build` 进行构建

不论是 `npm run dev` 还是 `npm run build`, 他们的构建产物，都在工程目录下的 `dist` 目录

使用微信开发者工具，直接导入工程目录，然后即可预览效果！

>注意不是导入 `dist` 目录，是你工程的根目录! 通常是 `dist` 的父级目录，不要搞错了！

## 配置好的模板

假如你配置不成功，你可以参考以下模板进行配置文件对比:

[native-weapp-tailwindcss-template](https://github.com/sonofmagic/native-weapp-tailwindcss-template)

## 更多场景

更多场景和配置，请查看 `更多场景` 章节;


